<template>
  <div class="realtime-box">
    <div class="left-content">{{ timeText }}</div>
    <div class="right-content">
      <div class="date-content">{{ dateText }}</div>
      <div class="week-content">{{ weekText }}</div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'realtimeBox',
    data() {
      return {
        timeText: '',
        dateText: '',
        weekText: '',
        tmpTime: new Date().getTime(),
        weekEnum: [
          this.$t('Byname27'), // 星期日
          this.$t('Byname21'), // 星期一
          this.$t('Byname22'), // 星期二
          this.$t('Byname23'), // 星期三
          this.$t('Byname24'), // 星期四
          this.$t('Byname25'), // 星期五
          this.$t('Byname25'), // 星期六
        ]
      }
    },
    created() {
      this.getTime()
    },
    methods: {
      getTime() {
        const now = new Date().getTime
        const timeGap = now - this.tmpTime
        const nextTickTime = 1000 - (timeGap % 1000)
        const currentDate = new Date()
        this.dateText = `${currentDate.getFullYear()}/${(
          currentDate.getMonth() + 1
        )
          .toString()
          .padStart(2, 0)}/${currentDate.getDate().toString().padStart(2, 0)}`
        this.weekText = this.weekEnum[currentDate.getDay()]
        this.timeText = `${currentDate
          .getHours()
          .toString()
          .padStart(2, 0)}:${currentDate
          .getMinutes()
          .toString()
          .padStart(2, 0)}`
        setTimeout(() => {
          this.getTime()
        }, nextTickTime)
      },
    },
  }
</script>
<style scoped lang="scss">
  .realtime-box {
    position: absolute;
    z-index: 101;
    display: flex;
    justify-content: flex-end;
    width: 200px;
    height: 60px;
    padding: 7px 0;
    user-select: none;

    & > .left-content {
      height: 46px;
      font-size: 36px;
      font-weight: bold;
      line-height: 46px;
      color: #e7f6f8;
      letter-spacing: 1px;
      background: linear-gradient(180deg, #f2fdff 0%, #c5f7ff 100%);
      background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    & > .right-content {
      display: flex;
      flex-direction: column;
      height: 43px;
      margin-top: 3px;
      margin-left: 6px;

      & > .date-content {
        height: 18px;
        font-size: 14px;
        font-weight: bold;
        line-height: 18px;
        color: #55ceff;
      }

      & > .week-content {
        height: 20px;
        font-size: 14px;
        line-height: 20px;
        color: #caff58;
      }
    }
  }
</style>
